<script setup>
import {ref} from 'vue';
import {useRouter} from "vue-router";
import routes from "../config/routes.ts";

const active = ref('主页');
const router = useRouter()
const title = ref('主页');

router.beforeEach((to, from, next) => {
  const toPath = to.path
  const toRoute = routes.find(route => route.path === toPath)
  title.value = toRoute?.title || '主页'
  next()
})
const onClickLeft = () => {
  router.back()
}
const onClickRight = () => {
  router.push('/search')
}
</script>

<template>
  <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
    <template #right>
      <van-icon name="search" size="18"/>
    </template>
  </van-nav-bar>

  <div id="content">
    <router-view></router-view>
  </div>

  <van-tabbar v-model="active" route>
    <van-tabbar-item name="index" icon="home-o" to="/">主页</van-tabbar-item>
    <van-tabbar-item name="team" icon="friends-o" to="/team">队伍</van-tabbar-item>
    <van-tabbar-item name="user" icon="user-o" to="/user">个人</van-tabbar-item>
  </van-tabbar>

</template>

<style scoped>
#content {
  padding-bottom: 50px;
}
</style>